<!--
 * @Author: doinb
 * @Date: 2019-05-09 16:18:13
 * @LastEditTime: 2019-08-31 16:08:53
 -->
<!--  -->
<template>
  <div
    class="main"
    id="home"
  >
    <!-- <el-carousel>
      <el-carousel-item
        v-for="item in 4"
        :key="item"
      >
        <h3>{{ item }}</h3>
      </el-carousel-item>
    </el-carousel> -->
    <div class="head">
      <div class="nav">
        <img
          src="../../assets/logo.png"
          alt=""
          @click="links"
        >
        <!-- <router-link
          v-for="(item,index) in $t('lis')"
          class="normal-class"
          :key="index"
          :class="{'active-class': currenIndex === index}"
        >{{item}}</router-link> -->
        <ul class="clearfix">
          <li
            v-for="(item,index) in $t('menu')"
            class="normal-class fl"
            :key="index"
            @click=clickChange(index)
            :class="{'active-class': currenIndex === index}"
          >{{item}}</li>
        </ul>
        <el-dropdown>
          <span class="el-dropdown-link">
            {{$i18n.locale==="zh"?"中文简体":"English"}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              @click.native="toggleLang('zh')"
              :disabled="$i18n.locale == 'zh'"
            >简体中文</el-dropdown-item>
            <el-dropdown-item
              @click.native="toggleLang('en')"
              :disabled="$i18n.locale == 'en'"
            >English</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="banner  ">
      <img
        src="../../assets/banner.png"
        alt=""
      >
      <div class="text clearfix">
        <div class="title fl">
          <h3>{{$t('home.banner.title')}}</h3>
          <p>{{$t('home.banner.des1')}}</p>
          <p>{{$t('home.banner.des2')}}</p>
          <el-button
            type="primary"
            class="btns"
            @click="links1"
          >{{$t('home.banner.btn')}}</el-button>
          <div class="btn1">
            <el-button
              type="primary"
              class="btns1"
              @click="links2('https://www.baidu.com')"
            >{{$t('home.banner.btn1')}}</el-button>
          </div>
        </div>
        <div class="pic fr">
          <img
            src="../../assets/home1.png"
            alt=""
          >
        </div>
      </div>
    </div>
    <!-- <div class="videos clearfix">
      <div class="detail fl">
        <h3>{{$t('home.prospect.title')}}</h3>
        <p>{{$t('home.prospect.content')}}</p>
        <h3>{{$t('home.concept.title')}}</h3>
        <p>{{$t('home.concept.content')}}</p>
      </div>
      <div class="video fr">
        <div
          class="con fr"
          style="border-radius: 8px;overflow:hidden;"
          :style="{width: w}"
        >
          <video-player
            class="vjs-custom-skin"
            :options="playerOptions"
            @ready="playerReadied"
            :playsinline="true"
            ref="videoPlayer"
            @play="onPlayerPlay($event)"
            @pause="onPlayerPause($event)"
            @ended="onPlayerEnded($event)"
          ></video-player>
        </div>
      </div>
    </div> -->
    <!-- <div class="mod">
      <h3>{{$t('company.mod1.title')}}</h3>
      <p>{{$t('company.mod1.content')}}</p>
    </div> -->
    <div class="con clearfix">
      <div class="con1 fl">
        <h3>{{$t('home.mod2.title')}}</h3>
        <p>{{$t('home.mod2.text1')}}</p>
        <p>{{$t('home.mod2.text2')}}</p>
      </div>
      <div class="con2 fr">
        <img
          src="../../assets/mod1.png"
          alt=""
        >
      </div>
    </div>
    <div class="con">
      <img
        src="../../assets/mod2.png"
        alt=""
      >
    </div>
    <div class="mid">
      <h3>{{$t('home.mod3.title')}}</h3>
      <img
        src="../../assets/mod3.png"
        alt=""
      >
    </div>
    <!-- <div class="mod">
      <h3>{{$t('home.mod1.title')}}</h3>
      <p class="p1">{{$t('home.mod1.content1')}}</p>
      <p class="p1">{{$t('home.mod1.content2')}}</p>
      <p class="p1">{{$t('home.mod1.content3')}}</p>
      <p class="p1">{{$t('home.mod1.content4')}}</p>
      <p class="p1">{{$t('home.mod1.content5')}}</p>
      <p class="p1">{{$t('home.mod1.content6')}}</p>
    </div> -->
    <div class="coin clearfix">
      <div class="coin_l fl">
        <h3>{{$t('home.mod4.title')}}</h3>
        <p class="des">{{$t('home.mod4.des')}}</p>
        <p>{{$t('home.mod4.content')}}</p>
        <div class="count clearfix">
          <div class="count_l fl">
            <ul>
              <li
                v-for="item in $t('charts.datas1')"
                :key="item.key"
              >
                {{item.name}}
                <p>{{item.value}}</p>
              </li>
            </ul>
          </div>
          <div class="count_r fl">
            <ul>
              <li
                v-for="item in $t('charts.datas2')"
                :key="item.key"
              >
                {{item.name}}
                <p>{{item.value}}</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="coin_r fr">
        <div
          id="main"
          style="width:450px;height:260px;"
        ></div>
        <div
          id="main1"
          style="width:450px;height:260px;"
        ></div>
      </div>
    </div>
    <div class="block">
      <h3>{{$t('product.mod2.title')}}</h3>
      <el-timeline>
        <el-timeline-item
          v-for="(item, index) in $t('product.mod2.lists')"
          :key="index"
          :icon="item.icon"
          :type="item.type"
          :color="item.color"
          size="large"
          :timestamp="item.timestamp"
          placement="top"
        >
          <el-card>
            <h4>{{item.content.mark}}</h4>
            <p v-html="item.content.desc">{{item.content.desc}}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
    <div class="rel">
      <h3>相关数据</h3>
      <ul class="clearfix">
        <li
          class="fl"
          v-for="item in $t('home.mod5.data')"
          :key="item.key"
        >
          <div class="pics clearfix">
            <div class="pics_l fl">
              <img
                :src="item.url"
                alt=""
              />
            </div>
            <div class="pics_r fl">
              <h3>{{item.mark}}</h3>
              <p class="num">{{item.num}}</p>
              <p class="des">{{item.des}}</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="address">
      <h3>{{$t('contact')}}</h3>
      <!-- {{$t('address')}}: 8 KAKI BUKIT AVENUE 4#03-21PREMIER @ KAKI BUKIT SINGAPORE (415875). -->
      <div class="mod"><img
          src="../../assets/email.png"
          alt=""
        > <span>official@ulm.io</span></div>
      <div class="mod"><img
          src="../../assets/address.png"
          alt=""
        ><span>8 KAKI BUKIT AVENUE 4 #03-21 PREMIER @ KAKI BUKIT SINGAPORE (415875).</span></div>
    </div>
    <div class="icons">
      <ul class="clearfix">
        <li class="fl" @click="links2('https://www.weibo.com')"></li>
        <li class="fl" @click="links2('http://www.twitter.de/')"></li>
        <li class="fl" @click="links2(' https://www.facebook.com/')"></li>
      </ul>
      <div class="qrcode">
        <ul>
          <li><img
              src="../../assets/img_wechat@2x.png"
              alt=""
            >
            <div class="pics">
              <img
                src="../../assets/img_wechat_qrcode@2x.png"
                alt=""
              >
            </div>
          </li>
          <li><img
              src="../../assets/icon_telegram@2x.png"
              alt=""
            ></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
// let videojs = require("video.js");
export default {
  data() {
    return {
      currenIndex: 0,
      langMark: this.$store.getters.reLang,
      w: "600px"
      // playerOptions: {
      //   autoplay: false, //如果true,浏览器准备好时开始回放。
      //   muted: false, // 默认情况下将会消除任何音频。
      //   loop: false, // 导致视频一结束就重新开始。
      //   preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
      //   language: "zh-CN",
      //   // aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
      //   // fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
      //   playbackRates: [0.7, 1, 1.3, 1.5, 1.7],
      //   sources: [
      //     {
      //       type: "video/mp4",
      //       src: "../../../static/video.mp4"
      //     }
      //   ],
      //   poster: require("../../assets/poster.jpg"),
      //   height: 300,
      //   controlBar: {
      //     timeDivider: true,
      //     durationDisplay: true,
      //     remainingTimeDisplay: false,
      //     fullscreenToggle: true //全屏按钮
      //   }
      // }
    };
  },
  computed: {
    // player() {
    //   return this.$refs.videoPlayer.player;
    // },
    // lang() {
    //   return this.$store.getters.reLang;
    // }
  },
  components: {},

  mounted() {
    this.currenIndex = 0;
    window.addEventListener("scroll", this.watchScroll);
    this.initChart();
    this.initChart1();
  },

  methods: {
    clickChange(index) {
      this.currenIndex = index;
      this.switchIndex(index);
    },
    switchIndex(index) {
      //  let scrollTop =
      //   window.pageYOffset ||
      //   document.documentElement.scrollTop ||
      //   document.body.scrollTop;
      switch (index) {
        case 0:
          document.documentElement.scrollTop = document.body.scrollTop = window.pageYOffset = 0;
          break;
        case 1:
          document.documentElement.scrollTop = document.body.scrollTop = window.pageYOffset = 400;
          break;
        case 2:
          document.documentElement.scrollTop = document.body.scrollTop = window.pageYOffset = 1630;
          break;
        case 3:
          document.documentElement.scrollTop = document.body.scrollTop = window.pageYOffset = 2030;
          break;
        case 4:
          document.documentElement.scrollTop = document.body.scrollTop = window.pageYOffset = 2560;
          break;
        case 5:
        // console.log(5)
         document.documentElement.scrollTop = document.body.scrollTop = window.pageYOffset =  3950;
          // document.documentElement.scrollTop =
          //   document.documentElement.scrollHeight - 60;
          // console.log(
          //   document.documentElement.scrollTop,
          //   document.documentElement.scrollHeight
          // );
          break;
        case 6:
          document.documentElement.scrollTop =
            document.documentElement.scrollHeight;
          break;
        case 7:
          this.$router.push("/Paper");
          break;
        // default:
        //   break;
      }
    },
    watchScroll() {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      //变量windowHeight是可视区的高度
      let windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      //变量scrollHeight是滚动条的总高度
      let scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      if (scrollTop >= 0 && scrollTop < 400) {
        this.currenIndex = 0;
      } else if (scrollTop >= 400 && scrollTop < 1630) {
        this.currenIndex = 1;
      } else if (scrollTop >= 1630 && scrollTop < 2030) {
        this.currenIndex = 2;
      } else if (scrollTop >= 2030 && scrollTop < 2700) {
        this.currenIndex = 3;
      } else if (scrollTop >= 2700 && scrollTop < 3950) {
        this.currenIndex = 4;
      } else if (scrollTop >= 3950 && scrollTop < 4240) {
        this.currenIndex = 5;
      } else if (
        scrollTop >= 4240 ||
        scrollTop + windowHeight == scrollHeight
      ) {
        this.currenIndex = 6;
      }
    },
    links() {
      this.$router.push("/Home");
    },
    toggleLang(lang) {
      if (lang == "zh") {
        localStorage.setItem("locale", "zh");
        this.langMark = "简体中文";
        this.$i18n.locale = localStorage.getItem("locale");
        this.$store.commit("setLang", "zh-cn");
        // this.$message({
        //   message: "切换为中文！",
        //   type: "success"
        // });
      } else if (lang == "en") {
        localStorage.setItem("locale", "en");
        this.langMark = "English";
        this.$i18n.locale = localStorage.getItem("locale");
        this.$store.commit("setLang", "en");
        // this.$message({
        //   message: "Switch to English!",
        //   type: "success"
        // });
      }
    },
    initChart() {
      // console.log(this.$t('charts.title'))
      let myChart = this.$echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      myChart.setOption({
        title: {
          //标题组件
          text: "",
          left: "50px", //标题的位置 默认是left，其余还有center、right属性
          textStyle: {
            color: "#436EEE",
            fontSize: 17
          }
        },
        tooltip: {
          //提示框组件
          trigger: "item", //触发类型(饼状图片就是用这个)
          formatter: "{a} <br/>{b} : {c} ({d}%)" //提示框浮层内容格式器
        },
        color: ["#3481CE", "#7BBDFF", "#11abff", "#ffdf6f", "#968ade"], //手动设置每个图例的颜色
        legend: {
          //图例组件
          //right:100,  //图例组件离右边的距离
          orient: "horizontal", //布局  纵向布局 图例标记居文字的左边 vertical则反之
          width: 40, //图行例组件的宽度,默认自适应
          padding: [0, 50, 0, 0],
          x: "right", //图例显示在右边
          y: "center", //图例在垂直方向上面显示居中
          itemWidth: 10, //图例标记的图形宽度
          itemHeight: 10, //图例标记的图形高度
          data: this.$t("charts.tool1"),
          textStyle: {
            //图例文字的样式
            color: "#333", //文字颜色
            fontSize: 14 //文字大小
          }
        },
        series: [
          //系列列表
          {
            name: this.$t("charts.title"), //系列名称
            type: "pie", //类型 pie表示饼图
            center: ["40%", "50%"], //设置饼的原心坐标 不设置就会默认在中心的位置
            radius: ["35%", "70%"], //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
            itemStyle: {
              //图形样式
              normal: {
                //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                label: {
                  //饼图图形上的文本标签
                  show: false //平常不显示
                },
                labelLine: {
                  //标签的视觉引导线样式
                  show: false //平常不显示
                }
              },
              emphasis: {
                //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                label: {
                  //饼图图形上的文本标签
                  show: true,
                  position: "center",
                  textStyle: {
                    fontSize: "14",
                    fontWeight: "bold"
                  }
                }
              }
            },
            data: this.$t("charts.data1")
          }
        ]
      });
    },
    initChart1() {
      // console.log(this.$t('chart1.title'))
      let myChart = this.$echarts.init(document.getElementById("main1"));
      // 指定图表的配置项和数据
      myChart.setOption({
        title: {
          //标题组件
          text: "",
          left: "50px", //标题的位置 默认是left，其余还有center、right属性
          textStyle: {
            color: "#436EEE",
            fontSize: 17
          }
        },
        tooltip: {
          //提示框组件
          trigger: "item", //触发类型(饼状图片就是用这个)
          formatter: "{a} <br/>{b} : {c} ({d}%)" //提示框浮层内容格式器
        },
        color: ["#7BBDFF", "#54A2EE", "#A5D2FF", "#3481CE", "#968ade"], //手动设置每个图例的颜色
        legend: {
          //图例组件
          //right:100,  //图例组件离右边的距离
          orient: "horizontal", //布局  纵向布局 图例标记居文字的左边 vertical则反之
          width: 40, //图行例组件的宽度,默认自适应
          x: "right", //图例显示在右边
          y: "center", //图例在垂直方向上面显示居中
          // left: "50px",
          itemWidth: 10, //图例标记的图形宽度
          itemHeight: 10, //图例标记的图形高度
          data: this.$t("charts.tool2"),
          textStyle: {
            //图例tool2
            color: "#333", //文字颜色
            fontSize: 14 //文字大小
          }
        },
        series: [
          //系列列表
          {
            name: this.$t("charts.title"), //系列名称
            type: "pie", //类型 pie表示饼图
            center: ["40%", "50%"], //设置饼的原心坐标 不设置就会默认在中心的位置
            radius: ["35%", "70%"], //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
            itemStyle: {
              //图形样式
              normal: {
                //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                label: {
                  //饼图图形上的文本标签
                  show: false //平常不显示
                },
                labelLine: {
                  //标签的视觉引导线样式
                  show: false //平常不显示
                }
              },
              emphasis: {
                //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                label: {
                  //饼图图形上的文本标签
                  show: true,
                  position: "center",
                  textStyle: {
                    fontSize: "14",
                    fontWeight: "bold"
                  }
                }
              }
            },
            data: this.$t("charts.data2")
          }
        ]
      });
    },
    links1() {
      this.$router.push("/Paper");
    },
    links2(url) {
      window.open(url, "_blank"); // 新窗口打开外链接
    }
    // onPlayerPlay(player) {
    //   // console.log('player play!', player)
    //   this.onPlayerPause(player);
    // },
    // onPlayerPause(player) {
    //   // console.log('player pause!', player)
    // },
    // onPlayerEnded(player) {
    //   // console.log('player ended!', player)
    //   this.playerReadied(player);
    // },
    // playerReadied(player) {
    //   // seek to 10s
    //   // console.log("example player 1 readied", player);
    //   player.currentTime(1);
    //   // console.log('example 01: the player is readied', player)
    // }
  },
  watch: {
    lang: {
      handler(newName, oldName) {
        console.log(newName, oldName);
        this.initChart();
        this.initChart1();
      },
      // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
      // immediate: true,
      deep: true
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../styles/style.scss";
.main {
  // width: 100;
  margin: 0 auto;
  // border: 1px solid green;
  // background: url("../../assets/logo.png") center no-repeat;
  .head {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    background: $bg1;
    height: 60px;
    line-height: 60px;
    text-align: right;
    padding-right: 5%;
    box-sizing: $box;
    border-bottom: 1px solid #dcdfe6;
    .nav {
      width: 1200px;
      margin: 0 auto;
      position: relative;
      img {
        // width:200px;
        height: 50px;
        position: absolute;
        left: 50px;
        top: 5px;
        // margin-top:5px;
        cursor: pointer;
      }
      ul {
        list-style: none;
        display: inline-block;
        margin-block-start: 0em;
        margin-block-end: 0em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        padding-inline-start: 0px;
        padding-right: 100px;
        box-sizing: $box;
        li {
          cursor: pointer;
        }
      }
      .normal-class {
        color: $text2;
        text-decoration: none;
        padding: 0 20px;
        line-height: 60px;
      }
      .normal-class:hover {
        color: $nav-color;
      }
      .active-class,
      .active-class2 {
        color: $nav-color;
      }
      /deep/ .el-dropdown:hover {
        color: $nav-color;
        cursor: pointer;
      }
      /deep/ .el-dropdown {
        position: absolute;
        top: 0;
        right: 0;
      }
    }
  }
  /deep/ .el-menu {
    display: inline-block;
    text-align: right;
    padding-left: 400px;
    box-sizing: border-box;
  }
  span {
    color: $nav-color;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
  .banner {
    // background:url('../../assets/banner.png') no-repeat center;
    // height:600px;
    // margin-bottom: 30px;
    position: relative;
    img {
      width: 100%;
      height: 600px;
    }
    .text {
      width: 1200px;
      position: absolute;
      top: 0;
      left: 50%;
      z-index: 5;
      margin-left: -600px;
      .title {
        margin-top: 110px;
        h3 {
          margin-block-start: 0em;
          margin-block-end: 0em;
          font-size: 50px;
          font-family: PingFangSC;
          font-weight: 600;
          color: rgba(255, 255, 255, 1);
          line-height: 84px;
          margin-bottom: 20px;
          width: 600px;
        }
        p {
          font-size: 18px;
          font-family: PingFangSC;
          font-weight: 300;
          color: rgba(255, 255, 255, 1);
          line-height: 28px;
          margin-block-start: 0em;
          margin-block-end: 0em;
          width: 600px;
        }
        .btns {
          margin-top: 40px;
          width: 180px;
          height: 40px;
        }
        .btn1 {
          margin-top: 12px;
          .btns1 {
            width: 180px;
            height: 40px;
            background: transparent;
            border: 1px solid rgba(151, 151, 151, 1);
          }
        }
      }
      .pic {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        img {
          margin-top: 110px;
          width: 520px;
          height: 480px;
        }
      }
    }
  }
  .videos {
    margin: 0 auto;
    width: $con;
    overflow: hidden;
    // padding: 0 20px;
    box-sizing: $box;
    .detail {
      width: 490px;
      padding-bottom: 3000px;
      margin-bottom: -3000px;
      h3 {
        color: $nav-color;
      }
      p {
        line-height: 25px;
        word-break: break-all;
      }
    }
    .video {
      // padding-top: 50%;
      box-sizing: $box;
      width: 600px;
      padding-bottom: 3000px;
      margin-bottom: -3000px;
      .con {
        border: 2px solid $text3;
        height: 300px;
        margin-top: calc(50% - 225px);
        width: 100%;
        // margin-top:-150px;
        /deep/ .video-js {
          width: 600px;
        }
        /deep/ .vjs_video_3-dimensions {
          // width: 600px;
        }
        /deep/ .video-js .vjs-big-play-button {
          top: 125px;
          left: 258px;
          // display: block;
        }
        /deep/ .vjs-has-started .vjs-big-play-button {
          // display:inherit;
        }
      }
    }
  }
  .mid {
    width: $con;
    margin: 0 auto;
    h3 {
      color: $nav-color;
    }
    img {
      width: 100%;
    }
  }
  .con {
    width: $con;
    margin: 0 auto;
    .con1 {
      width: 660px;
      padding-top: 70px;
      h3 {
        color: $nav-color;
      }
    }
    .con2 {
      padding-right: 80px;
      img {
        width: 360px;
        height: 400px;
      }
    }
    img {
      width: 100%;
    }
  }
  .mod {
    width: $con;
    margin: 0 auto;
    // padding: 0 20px;
    // box-sizing: $box;
    h3 {
      // font-size: 28px;
      padding: 10px 0;
      // font-size: 1.17em;
      color: $nav-color;
      margin-block-start: 0;
      margin-block-end: 0;
    }
    p {
      color: $text2;
      line-height: 25px;
    }
    .p1 {
      margin-top: 15px;
    }
  }
  .coin {
    width: $con;
    margin: 0 auto;
    margin-top: 20px;
    .coin_l {
      width: 560px;
      h3 {
        color: $nav-color;
      }
      .des {
        font-size: 16px;
        color: #303133;
        font-weight: bold;
      }
      p {
        color: #303133;
        line-height: 25px;
      }
      .count {
        margin-top: 50px;
        .count_l {
          ul {
            margin-block-start: 0em;
            margin-block-end: 0em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            padding-inline-start: 0px;
            li {
              font-size: 14px;
              color: #303133;
              list-style: none;
              p {
                font-weight: bold;
                font-size: 20px;
                color: #666;
                margin-block-start: 0em;
                margin-block-end: 0em;
                padding: 10px 0;
              }
            }
          }
        }
        .count_r {
          margin-left: 95px;
          ul {
            margin-block-start: 0em;
            margin-block-end: 0em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            padding-inline-start: 0px;
            li {
              font-size: 14px;
              color: #303133;
              list-style: none;
              p {
                font-weight: bold;
                font-size: 20px;
                color: #666;
                margin-block-start: 0em;
                margin-block-end: 0em;
                padding: 10px 0;
              }
            }
          }
        }
      }
    }
    .coin_r {
      margin-right: 100px;
    }
  }
  .block {
    width: $con;
    margin: 0 auto;
    h3 {
      color: $nav-color;
      margin-block-start: 0;
      margin-block-end: 0;
      padding: 15px 0;
      margin-bottom: 20px;
    }
  }
  .rel {
    width: $con;
    margin: 0 auto;
    margin-top: 20px;
    h3 {
      color: $nav-color;
    }
    ul {
      margin-block-start: 0em;
      margin-block-end: 0em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      padding-inline-start: 0px;
      width: 100%;
      display: block;
      li {
        width: 50%;
        list-style: none;
        display: inline-block;
        padding-left: 40px;
        box-sizing: $box;
        margin-top: 35px;
        .pics {
          .pics_l {
            width: 170px;
            img {
              width: 160px;
              height: 170px;
            }
          }
          .pics_r {
            margin-left: 50px;
            width: 250px;
            h3 {
              color: #303133;
              font-size: 20px;
              margin-block-start: 0em;
              margin-block-end: 0em;
              padding-top: 10px;
            }
            p {
              margin-block-start: 0em;
              margin-block-end: 0em;
              word-wrap: break-word;
            }
            .num {
              font-size: 32px;
              color: #178ce6;
              padding: 5px 0 8px 0;
            }
            .des {
            }
          }
        }
      }
    }
  }
  .address {
    width: $con;
    margin: 0 auto;
    h3 {
      color: $nav-color;
      margin-block-start: 0;
      margin-block-end: 0;
      padding: 15px 0;
      margin-bottom: 20px;
    }
    .mod {
      margin-top: 20px;
      color: #303133;
      img {
        width: 25px;
        height: 25px;
        vertical-align: middle;
      }
      span {
        padding-left: 10px;
        color: #303133;
      }
    }
  }
  .icons {
    width: $con;
    margin: 0 auto;
    position: relative;
    > ul {
      list-style: none;
      margin-block-start: 0em;
      margin-block-end: 0em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      padding-inline-start: 0px;
      margin-top: 40px;
      li {
        width: 36px;
        height: 36px;
        margin-right: 25px;
      }
      li:nth-child(1) {
        background: url("../../assets/icon_03@2x.png") no-repeat center;
        background-size: cover;
        cursor: pointer;
      }
      li:nth-child(1):hover {
        background: url("../../assets/icon_03_hover@2x.png") no-repeat center;
        background-size: cover;
        cursor: pointer;
      }
      li:nth-child(2) {
        background: url("../../assets/icon_04@2x.png") no-repeat center;
        background-size: cover;
        cursor: pointer;
      }
      li:nth-child(2):hover {
        background: url("../../assets/icon_04_hover@2x.png") no-repeat center;
        background-size: cover;
        cursor: pointer;
      }
      li:nth-child(3) {
        background: url("../../assets/icon_05@2x.png") no-repeat center;
        background-size: cover;
        cursor: pointer;
      }
      li:nth-child(3):hover {
        background: url("../../assets/icon_05_hover@2x.png") no-repeat center;
        background-size: cover;
        cursor: pointer;
      }
    }
    .qrcode {
      position: absolute;
      right: 50px;
      top: -25px;
      ul {
        list-style: none;
        margin-block-start: 0em;
        margin-block-end: 0em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        padding-inline-start: 0px;
        li {
          position: relative;
          > img {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            cursor: pointer;
          }
          .pics {
            display: none;
            position: absolute;
            right:62px;
            top:-168px;
            padding: 48px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 4px 12px 0px rgba(163, 179, 204, 0.5);
            border-radius: 12px;
            > img {
              width: 100px;
              height: 100px;
            }
          }
        }
        >li:nth-child(1):hover{
          .pics{
            display: block;
          }
        }
      }
    }
  }
}
</style>